<template>
  <div class="about">
    <div ref="header" class="header-container">123</div>
  </div>
</template>
<script>
export default {
  mounted() {
    document.addEventListener("scroll", this.onScroll);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.onScroll);
  },
  methods: {
    onScroll() {
      const scrollTop =
        document.documentElement.scrollTop + document.body.scrollTop;
      const headerDom = this.$refs.header;
      if (scrollTop >= 160 ) {
        if (!headerDom.getAttribute("class").includes("not-top")) {
          headerDom.className = "header-container not-top"; // 添加类名 css里设置动画
        }
      } else {
        headerDom.className = "header-container";
      }
    },
  },
};
</script>
<style lang="less" scoped>
.about{
  width: 100vw;
  height: 80rem;
.header-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1999;
  width: 100%;
  height: 74px;
  // background: opacity-color9;
  background-color: red;
  transition: all 0.2s;
  transform: translate3d(0, 0, 0);
  .not-top {
    transform: translate3d(0, -74px, 0);
  }
}
}
</style>